<template>
  <view class="container">
    <view class="header">支付信息</view>
    <view class="content">
      <view class="table-header">
        <view class="table-cell">支付类型</view>
        <view class="table-cell">支付状态</view>
        <view class="table-cell">支付金额</view>
      </view>
      <view v-for="pay in payList" :key="pay.payId" class="table-row">
        <view class="table-cell">{{ pay.payType }}</view>
        <view class="table-cell">{{ pay.payStatus }}</view>
        <view class="table-cell">{{ pay.payMoney }}</view>
        
      </view>
    </view>
    <view class="load-more" @click="loadMore">加载更多</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      payList: [],
      pageNum: 1,
      pageSize: 3,
    };
  },
  mounted() {
    // 在页面加载时获取支付信息列表
    this.fetchPayList();
  },
  methods: {
    fetchPayList() {
      // 通过接口或其他方式获取Pay对象列表的数据，并赋值给payList属性
      // 示例数据
      const that = this;
      //向后端发请求获取需要的数据
      uni.request({
        url: "/admin/pay/myPays",
        data: {
          pageNum: that.pageNum,
          pageSize: that.pageSize
        },
        success(res) {
          const newData = res.data.data.list;
          newData.forEach(pay => {
            if (pay.payType == 1) {
              pay.payType = '物业费';
            } else if (pay.payType == 2) {
              pay.payType = '水电费';
            } else if (pay.payType == 3) {
              pay.payType = '停车费';
            } else {
              pay.payType = '其他';
            }
            if (pay.payStatus == 1) {
              pay.payStatus = '未支付';
            } else if (pay.payStatus == 2) {
              pay.payStatus = '已支付';
            } else {
              pay.payStatus = '其他';
            }
          });
          that.payList = [...that.payList, ...newData];
        }
      })
    },
    loadMore() {
      this.pageNum++;
      this.fetchPayList();
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}

.header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  border: 1px solid #ccc;
  padding: 10px;
}

.table-header {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  font-weight: bold;
}

.table-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.table-cell {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
}

.load-more {
  text-align: center;
  padding: 10px;
  color: #007aff;
  cursor: pointer;
}
</style>
